import React, { Component } from 'react'
import { Menu } from 'antd';
import { Link } from 'react-router-dom'
//菜单里的小图标
import {

    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
} from '@ant-design/icons';

export default class HomeNav extends Component {
    get data() {
        const key = localStorage.getItem('sel')
        return key
    }
    onSelect = (e) => {
        localStorage.setItem('sel', e.key)
        this.setState({
            onSelect: e.key
        })
    }
    render() {
        return (
            <Menu
                //进入到菜单页面，默认选中的内容
                defaultSelectedKeys={[this.data]}
                //默认展开的二级菜单
                //菜单模式
                mode="inline"
                //深色菜单
                theme="light"
                onSelect={this.onSelect}
            >
                <Menu.Item key="/home" icon={<PieChartOutlined />}>
                    <Link to='/home'>首页</Link>
                </Menu.Item>
                <Menu.Item key="/home/management" icon={<DesktopOutlined />}>
                    <Link to="/home/management">管理员模块</Link>
                </Menu.Item>
                <Menu.Item key="/home/banner" icon={<ContainerOutlined />}>
                    <Link to='/home/banner'>轮播图管理</Link>
                </Menu.Item>
                <Menu.Item key="/home/menu" icon={<ContainerOutlined />}>
                    <Link to='/home/menu'>菜谱管理</Link>
                </Menu.Item>
                <Menu.Item key="/home/vip" icon={<ContainerOutlined />}>
                    <Link to='/home/vip'>会员管理</Link>
                </Menu.Item>
                <Menu.Item key="/home/combo" icon={<ContainerOutlined />}>
                    <Link to='/home/combo'>套餐管理</Link>
                </Menu.Item>
            </Menu>
        )
    }
}

